<%--
  Created by IntelliJ IDEA.
  User: 刘岱骞
  Date: 2025/6/16
  Time: 9:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>后台管理</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <script src="/layui/jquery-3.6.0.min.js"></script>
    <script>
        $(function () {

            layui.use(['form', 'layedit', 'laydate'], function () {
                var form = layui.form
                    , layedit = layui.layedit
                    , laydate = layui.laydate;

                laydate.render({
                    elem: '#date1' //或 elem: document.getElementById('test')、elem: lay('#test') 等
                    , format: 'yyyy-MM-dd HH:mm' //可任意组合
                    ,type: 'datetime'
                    , value: new Date()
                });

                //提交
                form.on('submit(formDemo)', function (data) {
                    // layer.msg(JSON.stringify(data.field));
                    return true;
                });
            });
        })
    </script>
</head>

<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>添加视频</legend>
</fieldset>
<div class="layui-bg-gray" style="padding: 0px;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">

                    <form class="layui-form layui-form-pane"    action="/video/add" method="post">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <input type="hidden" name="tid" value="${users.id}">
                                <label class="layui-form-label">课程名称</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="courseName" required lay-verify="required"
                                           placeholder="请输入课程名称" autocomplete="off" class="layui-input" value="${video.courseName}">
                                </div>
                                <label class="layui-form-label">视频标题</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="title" required lay-verify="required"
                                           placeholder="请输入视频标题" autocomplete="off" class="layui-input"  value="${video.title}">
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <button type="button" class="layui-btn demo-class-accept" lay-options="{accept: 'video'}">
                                    <i id="upload-icon" class="layui-icon layui-icon-upload"></i>
                                    上传视频
                                </button>
                                <label class="layui-form-label">视频URL</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="videoUrl" required lay-verify="required" id="videoUrl"
                                           placeholder="视频上传成功后自动识别" autocomplete="off" class="layui-input" readonly  value="${video.videoUrl}">
                                </div>
                            </div>

                        </div>




                        <div class="layui-form-item">

                            <label class="layui-form-label">视频简介</label>
                            <div class="layui-input-inline"></div>
                            <textarea name="description" style="width:72%" required lay-verify="required" placeholder="请输入视频描述"
                                      class="layui-textarea">${video.description}</textarea>
                        </div>


                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button id="upload-btn" class="layui-btn" lay-submit lay-filter="formDemo">添加</button>
                                <a class="layui-btn layui-btn-primary layui-border-blue" href="javascript:history.go(-1)">返回</a>
                            </div>
                        </div>
                    </form>



                </div>
            </div>
        </div>
    </div>
</div>
</div>

</body>
<script src="/layui/layui.js"></script>
<script>
    document.getElementById('upload-btn').disabled = true;
    layui.use(function(){
        var upload = layui.upload;
        var layer = layui.layer;
        // 渲染
        upload.render({
            elem: '.demo-class-accept', // 绑定多个元素
            url: '/video/upload', // 此处配置你自己的上传接口即可
            accept: 'file', // 普通文件
            done: function(res, index, upload){
                //document.getElementById("city").value=res.url;
                // console.log("aaaaaa"+res.url)
                document.getElementById("videoUrl").value=res.url;
                document.getElementById("upload-icon").className="layui-icon layui-icon-ok-circle "
                document.getElementById("upload-btn").disabled=false
            },
            progress: function(n, elem, res, index){
                //var percent = n + '%' // 获取进度百分比
                document.getElementById("upload-icon").className="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"
                console.log("开始上传:layui-icon layui-icon-loading")
            }
        });
    });
</script>
</html>